import React, { useEffect, useState } from 'react'

export default function EffectHookCancelDemo() {

    const [count, setCount] = useState(0);

    //====>>第一个参数传入一个函数，组件挂载会执行函数体，组件卸载会执行函数返回的函数体。
    //===>>第二个参数 传入 数组 不传会有点问题(组件重新render后 会执行useEffect函数  先取消订阅 然后再执行 订阅)
    useEffect(() => {
        //==>>这里相当于 componentDidMount周期函数
        console.log("订阅一些事件");

        return () => {
            //===>>>这里相当于componentWillUnmount生命周期函数
            console.log("取消订阅事件")
        }
    }, []);

    return (
        <div>
            <h2>EffectHookCancelDemo</h2>
            <h2>{count}</h2>
            <button onClick={e => setCount(count + 1)}>+1</button>
        </div>
    )
}
